<template>
  <a-form :form="form" layout="vertical" class="rx-a-form-vertical">
          <a-form-item :label="i18n('form.percentage','百分比类型')" >
              <a-radio-group name="radioGroup" v-model="mdl.type">
                  <a-radio :value="1">
                      0-1
                  </a-radio>
                  <a-radio :value="2">
                      0-100
                  </a-radio>

              </a-radio-group>
          </a-form-item>

          <a-form-item  :label="i18n('form.labelColor','标签颜色')" >
              <a-input class="labeinput" type="color" :placeholder="i18n('form.labelColor','标签颜色')" v-model="mdl.fgcolor" />
          </a-form-item>
          <a-form-item :label="i18n('form.styleSelect','风格选择')">
              <div>
                  <div class="circular" @click="Select('circular')">
                      <a-progress :strokeColor="mdl.fgcolor" class="aprogress" type="circle" :percent="50">
                          <template #format="percent">
                              <span>50%</span>
                          </template>
                      </a-progress>
                      <div class="circular_select" v-if="mdl.stylename =='circular'"><i class="iconfont iconright"></i></div>
                  </div>
                  <div class="strip" @click="Select('strip')">
                      <a-progress :strokeColor="mdl.fgcolor" :percent="50" />
                      <div class="circular_select" v-if="mdl.stylename =='strip'"><i class="iconfont iconright"></i></div>
                  </div>
              </div>
          </a-form-item>
  </a-form>

</template>

<script>
  export default {
    name: "renderConfig_display_percent",
    props:["layerid","destroy"],
    data(){
      return {
        labelCol: { span:6 },
        wrapperCol: { span:18 },
        labelCol1: { span:3 },
        wrapperCol1: { span:19 },
        form: this.$form.createForm(this),
        mdl:{}
      }
    },

      mounted() {
        //默认选中第一中风格
          this.$nextTick(() => {
                  if(!this.mdl.stylename){
                      this.Select('circular');
                  }
                  if(!this.mdl.fgcolor){
                      this.$set(this.mdl,'fgcolor','#f70202')
                  }
          });


      },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
      //  选中风格
        Select(name){
                this.$set(this.mdl,'stylename',name)
        },
      setData(data,fieldDts){
        this.mdl=data;
        if(!this.mdl.type){
            // this.mdl.type = 2;
            this.mdl = Object.assign({type: 1});
        }
        this.form.setFieldsValue(this.mdl);
      },
      validate(callback){
        var self=this;
          callback();

      },
      getData(){
        return this.mdl;

      },

    }
  }
</script>

<style>
.circular{
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 2px;
    border: dashed 1px #dadde0;
    margin-top: 10px;
    float: left;
    position: relative;
}
.circular_select{
    position: absolute;
    right: 0px;
    top: 0px;
    height:17px;
    width: 17px;
    border:17px solid;
    border-color:#5b8fff  #5b8fff transparent  transparent ;
}
.circular_select i{
    float: left;
    margin-top: -14px;
    font-size: 12px;
    color: white;
}
.strip{
    width: 160px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 2px;
    border: dashed 1px #dadde0;
    margin-top: 10px;
    float: left;
    margin-left: 20px;
    padding:37px 20px 0px 20px;
    position: relative;
}
.aprogress > .ant-progress-inner{
    width: 80px!important;
    height: 80px!important;
    margin: 10px!important;
}
.labelclac{
    margin: 25px;
}
.labeinput{
    margin-top: 10px;
    width: 70px;
}
</style>